<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	
		<!--进度条-->
		<!--<progress value="50" width="100px" height="20px" max="100"></progress>-->
		<progress value="0" width="100px" height="20px" max="100"></progress>
		
		
		<script type="text/javascript">
			var xhr=new XMLHttpRequest();
			var progess = document.getElementsByTagName("progress")[0];
			
			var src = "http://chenkangwei.gitee.io/jindu/mp3/Git Fresh - Booty Music.mp3";
			xhr.open('get',src,true);
			xhr.send();
			xhr.addEventListener("readystatechange",function(e){
				var res = e.target;
				if(res.readyState == 4){
					if(res.state == 200){
						console.log("请求成功");
					}
				}
			});
			
			xhr.addEventListener("progress",function(e){
				console.log(e);
			})
			
			xhr.onprogress = function(event){
				if(event.lengthComputable){
					progess.setAttribute("value",event.loaded);
					progess.setAttribute("max",event.total);
					
				}
			}
		</script>
	</body>
</html>
